<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>天气案例_监视属性</title>
		<script src="../../JS/vue.js"></script>
	</head>
	<body>
		<!-- 
         监视属性watch:
             1、当被监视的属性变化是，回调函数自动调用，进行相关操作
             2、监视的属性必须存在，才能进行监视；
             3、监视的两种写法：
                  (1).new Vue时传入watch配置；
                  (2).通过vm.$watch监视


     -->

		<div id="root">
			<!-- <h2>今天心情很不好{{isHot ? 炎热 : 凉爽}}</h2> -->
			<h2>今天心情很{{info}}</h2>
			<button @click="changeWeatcher">切换天气</button>
		</div>
		<script>
			Vue.config.productionTip = false //阻止 vue 在启动时产生提示
			const vm = new Vue({
				el: '#root',
				data: {
					isHot: true
				},
				methods: {
					changeWeatcher() {
						this.isHot = !this.isHot
					}
				},
				computed: {
					info() {
						return this.isHot ? '糟糕' : '高兴'
					}
				}
				// watch: {
				// 	isHot: {
				// 		immediate: true, //初始化是让handler调用一下
				// 		// handeler什么时候调用？当isHot发生变化的时候
				// 		handler(newValue, oldValue) {
				// 			console.log('isHot被修改', newValue, oldValue)
				// 		}
				// 	}
				// }
			})
			// vm初始化之前就知道监视的是哪个属性的用 watch
			// 不知道的用vm.$watch
			vm.$watch('isHot', {
				immediate: true, //初始化是让handler调用一下
				// handeler什么时候调用？当isHot发生变化的时候
				handler(newValue, oldValue) {
					console.log('isHot被修改', newValue, oldValue)
				}
			})
		</script>
	</body>
</html>
